<template>
  <div>
    <test v-model="bookTitle"></test>
    <p>{{bookTitle}}{{name}}</p>
    <v-model v-model:title="bookTitle" v-model:name="name"></v-model>
    <article-template
      v-for="(item, i) in list"
      :key="i"
      :obj="item"
      :index="i"
      prefix=""
      ids="1111"
      @getTitle="getTitle"
    >
    </article-template>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, getCurrentInstance,ref } from "vue";
import articleTemplate from "@/views/wordModel/components/articleTemplate.vue";
import test from "@/views/wordModel/components/test.vue"
import vModel from "@/views/wordModel/components/vModel.vue"

export default defineComponent({
  components: {
    articleTemplate,
    test,
    vModel
  },
  setup() {
     const { proxy }: any = getCurrentInstance();
    //  console.log(proxy)
    const attr = ref("12121");
    const list = reactive([
      {
        title: "标题1",
        content: "内容1",
        children: [
          {
            title: "标题11",
            content: "内容11",
            children: [
              {
                title: "标题111",
                content: "内容1111",
                children: [
                  {
                    title: "标题1111",
                    content: "内容1111",
                  },
                  { title: "标题1112", content: "内容1112" },
                ],
              },
            ],
          },
        ],
      },
      {
        title: "标题2",
        content: "内容2",
        children: [{ title: "标题21", content: "内容21" }],
      },
    ]);
    const bookTitle = ref("12121");
    const name = ref("小明");
    const getTitle = (obj:any) => {
      console.log(obj)
    }
    return {
      list,
      attr,
      bookTitle,
      getTitle,
      name
    };
  },
});
</script>

<style>
</style>
